.audio-container-wrap{
    position: relative;
    display:block;
    z-index:1;
    .audio-container{
        position: relative;
        display: block;
        width: 150px;
        height: 32px;
        float: left;
        cursor:pointer;
        z-index:1;
        background-color: #f8f8f8;
        background-image: -webkit-linear-gradient(-180deg, #f8f8f8 0%, #efefef 100%);
        background-image: -moz-linear-gradient(-180deg, #f8f8f8 0%, #efefef 100%);
        background-image: -o-linear-gradient(-180deg, #f8f8f8 0%, #efefef 100%);
        background-image: linear-gradient(-180deg, #f8f8f8 0%, #efefef 100%);
        border: 1px solid rgba(0, 0, 0, 0.12);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        margin: 0 5px;

        .audio-status {
            position: absolute;
            display: block;
            top: 8px;
            left: 15px;
            width: 13px;
            height: 15px;
            z-index:2;
            background:url('') no-repeat top left;
            -webkit-background-size: 100%;
            background-size: 100%;
            &.playing {
                -webkit-animation: audio_playing 1s infinite;
                -o-animation: audio_playing 1s infinite;
                animation: audio_playing 1s infinite;
            }
            &.error:after {
                content:'!';
                position:absolute;
                display:block;
                line-height:15px;
                font-size:13px;
                color:#aaa;
                top:0;
                left:16px;
            }
        }
        .progress-container-wrap{
            position:absolute;
            display:block;
            width:100%;
            height:100%;
            top:0;
            left:0;
            z-index:1;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            overflow: hidden;
            .progress-container{
                position: absolute;
                display: block;
                width:0%;
                height:100%;
                top:0;
                left:0;
                z-index:2;
                background-color: #229e1f;
                background-image: -webkit-linear-gradient(90deg, #229e1f 0%,  #42e43f 100%);
                background-image: -moz-linear-gradient(90deg, #229e1f 0%,  #42e43f 100%);
                background-image: -o-linear-gradient(90deg, #229e1f 0%,  #42e43f 100%);
                background-image: linear-gradient(90deg, #229e1f 0%,  #42e43f 100%);
            }
            &:before{
                content: '';
                position:absolute;
                display: block;
                height:100%;
                width:8px;
                z-index:1;
                background-color: #f8f8f8;
                background-image: -webkit-linear-gradient(-180deg, #f8f8f8 0%, #efefef 100%);
                background-image: -moz-linear-gradient(-180deg, #f8f8f8 0%, #efefef 100%);
                background-image: -o-linear-gradient(-180deg, #f8f8f8 0%, #efefef 100%);
                background-image: linear-gradient(-180deg, #f8f8f8 0%, #efefef 100%);
            }
        }
        &:before {
            content: '';
            position: absolute;
            display: block;
            width: 8px;
            height: 8px;
            z-index:1;
            border: 1px solid rgba(0, 0, 0, 0.12);
            -moz-transform: rotate(45deg); /* Firefox */
            -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
            -o-transform: rotate(45deg); /* Opera */
            transform: rotate(45deg);
            left: -5px;
            top: 11px;
            background-color: #f8f8f8;
            background-image: -webkit-linear-gradient(-180deg, #f8f8f8 0%, #efefef 100%);
            background-image: -moz-linear-gradient(-180deg, #f8f8f8 0%, #efefef 100%);
            background-image: -o-linear-gradient(-180deg, #f8f8f8 0%, #efefef 100%);
            background-image: linear-gradient(-180deg, #f8f8f8 0%, #efefef 100%);
            border-top: none;
            border-right: none;
        }
        &.progress::before{
            content: '';
            background-color: #229e1f;
            background-image: -webkit-linear-gradient(90deg, #229e1f 0%,  #229e1f 100%);
            background-image: -moz-linear-gradient(90deg, #229e1f 0%,  #229e1f 100%);
            background-image: -o-linear-gradient(90deg, #229e1f 0%,  #229e1f 100%);
            background-image: linear-gradient(90deg, #229e1f 0%,  #229e1f 100%);
        }
        &:after{
            content: '';
            position: absolute;
            display:block;
            top:0;
            left:0;
            width:100%;
            height:100%;
            opacity:0;
            z-index:3;
            cursor: pointer;
        }
    }
    .audio-time {
        position: relative;
        display: block;
        float: left;
        line-height: 32px;
        color: #999;
        font-size: 13px;
        font-family: SFUIDisplay-Regular, Arial;
    }

    &:after {
        content:'';
        clear:both;
        display:block;
    }
}
audio:not([controls]) {
    display: none !important;
}
@-webkit-keyframes audio_playing {
    0% {
      background-position: 0 -15px;
    }
    30% {
      background-position: 0 -15px;
    }
    30.1% {
      background-position: 0 -30px;
    }
    61% {
      background-position: 0 -30px;
    }
    61.1% {
      background-position: 0 -45px;
    }
    100% {
      background-position: 0 -45px;
    }
}
@-moz-keyframes audio_playing {
    0% {
      background-position: 0 -15px;
    }
    30% {
      background-position: 0 -15px;
    }
    30.1% {
      background-position: 0 -30px;
    }
    61% {
      background-position: 0 -30px;
    }
    61.1% {
      background-position: 0 -45px;
    }
    100% {
      background-position: 0 -45px;
    }
}
@-o-keyframes audio_playing {
    0% {
      background-position: 0 -15px;
    }
    30% {
      background-position: 0 -15px;
    }
    30.1% {
      background-position: 0 -30px;
    }
    61% {
      background-position: 0 -30px;
    }
    61.1% {
      background-position: 0 -45px;
    }
    100% {
      background-position: 0 -45px;
    }
}
@keyframes audio_playing {
    0% {
      background-position: 0 -15px;
    }
    30% {
      background-position: 0 -15px;
    }
    30.1% {
      background-position: 0 -30px;
    }
    61% {
      background-position: 0 -30px;
    }
    61.1% {
      background-position: 0 -45px;
    }
    100% {
      background-position: 0 -45px;
    }
}
